<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/calender.js"></script>
    <style>
        .calendar-wrapper {
            padding: 10px;
            width: 320px;
            margin: 50px auto;
            background-color: grey;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
        }

        .calendar-wrapper .calendar-header {
            display: flex;
            justify-content: space-between;
        }

        .calendar-wrapper .calendar-header .prev,
        .calendar-wrapper .calendar-header .next {
            width: 40px;
        }

        .calendar-wrapper .calendar-header .center {
            flex: 1;
        }

        .calendar-wrapper .calendar-title,
        .calendar-wrapper .calendar-list {
            display: flex;
        }

        .calendar-wrapper .calendar-title li {
            width: -webkit-calc(100% / 7);
            border: 1px solid #333;
            box-sizing: border-box;
        }

        .calendar-wrapper .calendar-title li+li {
            border-left: 0;
        }


        .calendar-wrapper .calendar-list {

            flex-wrap: wrap;
        }

        .calendar-wrapper .calendar-list li {
            box-sizing: border-box;
            width: -webkit-calc(100% / 7);
            border: 1px solid #333;
            border-top: 0;
        }

        .calendar-wrapper .calendar-list li:not(:nth-child(7n+1)) {
            border-left: 0;
        }

        .calendar-prev,
        .calendar-next {
            color: #f1f1f1;
        }
    </style>
</head>

<body>
    <!-- .calendar-wrapper>.calendar-header+.calendar-title+.calendar-list -->
    <!-- .calendar-wrapper>(.calendar-header>.prev+.title+.next)+(ul.calendar-title>li*7{一})+ul.calendar-list>li*42{$$} -->
    <div class="calendar-wrapper">
        <div class="calendar-header">
            <div class="prev">上</div>
            <div class="title"></div>
            <div class="next">下</div>
        </div>
        <ul class="calendar-title">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <ul class="calendar-list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
            <li>41</li>
            <li>42</li>
        </ul>
    </div>
</body>
<script>

    var title = document.getElementsByClassName("title")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
    var calendarList = document.getElementsByClassName("calendar-list")[0];



    // 全局变量  
    // 1. 页面加载时的当前时间(默认生成当前月的日历)
    // 2. 记录切换后的日期对象
    var date = new Date();

    // 页面加载时 根据当前月份生成日历
    createCalendar();


    prev.onclick = function () {
        // 注意: 月份切换之前 => 提前将日期设置为1(日历的生成不需要日期)
        date.setDate(1);
        date.setMonth(date.getMonth() - 1);
        console.log(date);
        createCalendar();
    }
    next.onclick = function () {
        date.setDate(1);
        date.setMonth(date.getMonth() + 1);
        console.log(date);
        createCalendar();
    }


    function createCalendar() {
        // 日期展示
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        title.innerHTML = `${year}年${month}月`;

        // 日历生成
        var week = getFirstDayWeek(date);

        var lastMonthDays = getLastMonthDays(date);

        var thisMonthDays = getThisMonthDays(date);


        var html = "";

        // 上个月
        for (var i = lastMonthDays - (week - 1) + 1; i <= lastMonthDays; i++) {
            html += `<li class="calendar-prev">${i}</li>`;
        }

        // 当前月
        for (var i = 1; i <= thisMonthDays; i++) {
            html += `<li class="">${i}</li>`;
        }

        // 下个月
        for (var i = 1; i <= 42 - (week - 1) - thisMonthDays; i++) {
            html += `<li class="calendar-next">${i}</li>`;
        }


        calendarList.innerHTML = html;
    }








</script>

</html>